<template>
  <div>
    <div class="form-wrap">
      <div class="input-field">
        <span class="label mark">+86</span>
        <span class="input-block">中国</span>
      </div>
      <div class="input-field">
        <span class="label">手机号</span>
        <input
          v-model="form.loginName"
          class="input-block"
          type="number"
          placeholder="填写手机号"
          placeholder-class="placeholder-part"
          maxlength="11"
        />
      </div>
      <div class="input-field">
        <span class="label">密码</span>
        <input
          v-model="form.password"
          class="input-block"
          type="text"
          password
          placeholder="6-20位登录密码"
          placeholder-class="placeholder-part"
        />
      </div>
      <button class="btn-color-blue" @click="handleNext">下一步</button>
      <div class="newLink">
        <a href="/pages/open-shop/store-register/step2/main">会员注册</a>
        <!-- <a href="/pages/open-shop/store-find-pas/main">找回密码</a> -->
      </div>

      <div class="forget">
        <p>您必须成为爱卡卡会员</p>
        <span>才能开店哦</span>
      </div>
    </div>
  </div>
</template>

<script>
import { encryptMD5 } from '@/utils'
import { STORE_CUSTOMER_LOGIN, STORE_CUSTOMER_TOKEN } from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      // form: { loginName: '18581839093', password: '123456' }
      // form: { loginName: '18512700000', password: '123456' }
      // form: { loginName: '18512848317', password: '123456' }
      form: { loginName: '', password: '' }
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.$cookie.remove('store-mobile')
  },
  methods: {
    handleNext () {
      this.customerToken()
    },

    customerToken () {
      const vm = this
      if (!vm.form.loginName) {
        vm.$toast('请填写手机号')
        return false
      } else if (!vm.form.password) {
        vm.$toast('请填写登录密码')
        return false
      }
      let params = {
        ...vm.form,
        providerId: vm.$store.state.account.providerId,
        appId: 23
      }
      params.password = encryptMD5(vm.form.password)

      STORE_CUSTOMER_TOKEN(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.customerLogin(r.data.data)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },

    customerLogin (token) {
      const vm = this

      if (!vm.form.loginName) {
        vm.$toast('请填写手机号')
        return false
      } else if (!vm.form.password) {
        vm.$toast('请填写登录密码')
        return false
      }

      let params = {
        ...vm.form,
        providerId: vm.$store.state.account.providerId,
        source: 'H5',
        token: token
      }
      params.password = encryptMD5(vm.form.password)

      STORE_CUSTOMER_LOGIN(params)
        .then(r => {
          if (r.data.code === '0') {
            let { customerId, mobile } = r.data.data
            // vm.$router.push(
            //   `/pages/open-shop/open-shop-find-list/main?customerId=${customerId}&mobile=${mobile}`
            // )
            vm.$router.push(
              `../../new-open-shop/pages/new-open-shop/index/main?customerId=${customerId}&mobile=${mobile}`
            )
            // openShopAction(customerId)
            vm.$cookie.set('store-mobile', mobile)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.newLink {
  display: flex;
  // justify-content: space-between;
  justify-content: center;
  color: $blue;
  font-size: 14px;
  margin-top: 40px;
  a {
    width: 50%;
    text-align: center;
  }
}

.form-wrap {
  > .btn-color-blue {
    margin-top: 30px;
  }
  > .forget {
    color: #666;
    font-size: 12px;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>
